<template>
  <div class="newscontainer">
    <el-badge :value="total" :max="99" class="badge">
      <i class="el-icon-bell" @click="handleLookMsg"></i>
    </el-badge>
    <div class="news-tab" v-show="isShow">
      <el-tabs v-model="activeName">
        <el-tab-pane label="Notification" name="first">
          <Notification ref="Notification" @handleRead="handleRead">
            <!-- <div class="top-header">
              <span @click="handleReadAll('Notification')">Mark Readed</span>
            </div> -->
          </Notification>
        </el-tab-pane>
        <el-tab-pane label="Message" name="second">
          <Message ref="Message" @handleRead="handleRead">
             <!-- <div class="top-header">
              <span>Mark Readed</span>
            </div> -->
          </Message>
        </el-tab-pane>
        <el-tab-pane label="Event" name="third">
          <Event ref="Event" @handleRead="handleRead">
            <!-- <div class="top-header">
              <span>Mark Readed</span>
            </div> -->
          </Event>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import Notification from "./comps/Notification";
import Message from "./comps/Message";
import Event from "./comps/Event";
import { NotificationList, MessageList, EventList } from "@/utils/table.js";
export default {
  components: {
    Notification,
    Message,
    Event
  },
  data() {
    return {
      activeName: "first",
      isShow:false,
      total: 0
    };
  },
  mounted() {
    this.total =
      NotificationList.length + MessageList.length + EventList.length;
      this.$refs.Notification.list = NotificationList;
      this.$refs.Message.list = MessageList;
      this.$refs.Event.list = EventList;


  },
  methods: {
    handleLookMsg() {
      this.isShow = !this.isShow;
    },
    handleRead() {
      if(!this.total){
        return
      }else{
        this.total--;
      }
    },
    handleReadAll(name) {
      this.$refs[name].list.forEach(el=>{
        el.isread = true
      })
    }
  }
};
</script>


<style lang="scss" scoped>
.newscontainer {
  position: relative;
  .badge {
    position: absolute;
    cursor: pointer;
    left: 0px;
    top: 25px;
    .el-icon-bell {
      font-size: 24px;
    }
  }
  .news-tab {
    width: 336px;
    height: 454px;
    z-index: 100;
    position: fixed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    top: 75px;
    right: 6%;
    background: #ffffff;
    overflow: auto;
    border-radius: 5px;
  }
  .news-tab::-webkit-scrollbar {
    display: none;
  }
  .news-tab /deep/ .el-tabs__item {
    width: 150px;
    text-align: center;
  }
  .news-tab /deep/.el-tabs__nav-prev {
    left: 10px;
  }
  .news-tab /deep/.el-tabs__nav-next {
    right: 10px;
  }
}
</style>
